<template>
  <a-card :loading="loading">
    <search-bar :searchItems="searchItems" @search="searchHandle" />
    <table-page
      :table-cols="tableCols"
      :table-datas="tableDatas"
      :operationBtns="operationBtns"
      @operationHandel="operationHandel"
      :selectOptionDatas="selectOptionDatas"
    />
    <pagination
      :total="params.total"
      :limit="params.limit"
      :page="params.page"
      @pagination="paginationHandel"
    />
    <modal-form
      :visibleModal="fromVisible"
      :formItems="formItems"
      @submit="submitHandel"
      @close="fromVisible=false"
      :formData="formData"
      :selectOptionDatas="selectOptionDatas"
    />
  </a-card>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import TablePage from "@/components/TablePage";
import Pagination from "@/components/Pagination";
import ModalForm from "@/components/ModalForm";
import Vue from "vue";

export default {
  components: {
    SearchBar,
    TablePage,
    Pagination,
    ModalForm,
  },
  data() {
    return {
      loading: false,
      searchItems: [
        { key: "nikename", label: "昵称" },
        { key: "username", label: "用户名" },
      ],
      tableCols: [
        { title: "昵称", dataIndex: "nickName" },
        { title: "用户名", dataIndex: "userName" },
        { title: "用户类型", dataIndex: "type", type: "select" },
        { title: "手机号", dataIndex: "phoneNumber" },
        { title: "创建时间", dataIndex: "createTime", type: "dateTime" },
      ],
      operationBtns: [
        { key: "add", label: "添加", pos: "top", type: "primary", perm: [9] },
        { key: "edit", label: "编辑", perm: [9] },
        { key: "delete", label: "删除", perm: [9] },
      ],
      formItems: [
        {
          key: "userName", label: "用户名",
          rule: [{ required: true, message: "请输入用户名！", trigger: "blur" }],
        },
        { key: "type", label: "用户权限", type: "select" },
        { key: "password", label: "密码", type: "password" },
        { key: "avatar", label: "头像", type: "uploadImage" },
        {
          key: "nickName", label: "昵称",
          rule: [{ required: true, message: "请输入昵称！", trigger: "blur" }],
        },
        { key: "phoneNumber", label: "手机号" },
        { key: "ememailail", label: "邮箱" },
      ],
      params: { total: 0, limit: 10, page: 0 },
      tableDatas: [],
      selectOptionDatas:{
        status: [ { label: "正常", value: 0 }, { label: "冻结", value: 1 } ],
        type: [ { label: "巡回护士", value: 0 }, { label: "SPD护士", value: 1 }, { label: "管理员", value: 9 } ]
      },
      formData: {},
      fromVisible: false,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$store.dispatch("user/queryUserList", this.params).then((res) => {
        this.tableDatas = res.list;
        this.params.total = res.totalCount;
      });
    },
    searchHandle(params) {
      this.params = { ...this.params, ...params };
      this.initData();
    },
    operationHandel(row, event) {
      var vm=this;
      if (event === "delete") {
        vm.$confirm({
          title: "确定要删除此记录吗？",
          onOk() {
            vm.$store.dispatch("user/deleteUser", [row.id]).then(() => {
              vm.initData();
              vm.$message.success("删除成功！");
            });
          },
        });
      } else if (event === "add") {
        vm.fromVisible = true;
        vm.formData = {};
      } else if (event === "edit") {
        vm.fromVisible = true;
        vm.formData = row;
      }
    },
    paginationHandel({ page, limit }) {
      this.params.page = page;
      this.params.limit = limit;
      this.initData();
    },
    submitHandel(data) {
      this.$store
        .dispatch(`user/${data.id ? "update" : "save"}User`, data)
        .then((res) => {
          this.$message.success("保存成功！");
          this.fromVisible = false;
          this.initData();
        });
    },
  },
};
</script>
<style scoped>
.ant-card {
  min-height: calc(100vh - 64px);
  margin: 24px 24px 0;
}
</style>